<template>
  <div>
    <el-upload
      name="upload"
      class="upload-demo"
      :action="uploadServe"
      :data="params"
      :before-upload="beforeUpload"
      :on-success="handlerSuccess"
      :on-error="handlerError"
      :accept="accept"
      :with-credentials="true"
      multiple
      :show-file-list="false"
    >
      <!--:file-list="fileList"-->
      <slot>
        <el-button size="small">上&nbsp;&nbsp;&nbsp;&nbsp;传</el-button>
        <!--<div slot="tip" class="el-upload__tip">只能上传doc,docx格式文档，且不超过50MB</div>-->
      </slot>
      <div slot="tip" class="el-upload__tip">
        <slot name="tip">上传文件不得超过100MB。</slot>
      </div>
    </el-upload>
    <ul class="el-upload-list el-upload-list--text">
      <li v-for="item in fileList" :key="uuid()" tabindex="0" class="el-upload-list__item is-success">
        <el-link :href="downloadUrl(item)" target="_blank" class="el-upload-list__item-name">{{ item.name }}</el-link>
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-circle-check" />
        </label>
        <i class="el-icon-close" @click="beforeRemove(item)" />
        <i class="el-icon-close-tip">
          按delete 键可删除
        </i>
      </li>
    </ul>
  </div>
</template>

<script>
import { UPLOADPATH } from '@/config/AppConstConfig'
import { uuid } from '@/utils/util'
import axios from 'axios'

export default {
  name: 'CommonUpload',
  props: {
    // 上传到哪个【模块】
    groupCode: {
      type: String,
      required: true,
      default: ''
    },
    // 【允许的扩展名】 例如：'.doc,.docx,.DOC,.DOCX'
    accept: {
      type: String,
      default: '.doc,.docx,.DOC,.DOCX'
    },
    // 【文件上传成功】事件
    onSuccess: {
      type: Function
    },
    // 【文件移除】事件
    onRemove: {
      type: Function
    },
    // 【文件列表】
    list: {
      type: Array,
      default() {
        // {id:'',name:''}
        return []
      }
    }
  },
  data() {
    return {
      // 上传参数
      params: {
        // 程海：2020-11-19 20:19:22
        // 名称不得包含大写字符或下划线  名称必须以小写字母或数字开头
        module: this.groupCode.toLowerCase()
      },
      // 文件列表 [{name: '', url: '', id: ''}]
      fileList: this.list || []
    }
  },
  computed: {
    uploadServe() {
      return UPLOADPATH
    }
  },
  watch: {
    list: {
      handler(val) {
        this.fileList = val
      }
    }
  },
  methods: {
    uuid,
    // 上传之前获取文件信息
    beforeUpload(file) {
      //
      // this.params.module = this.groupCode
      // this.params.uploadFileName = file.name
      // this.params.uploadContentType = file.name.replace(/.+\./, '').toLowerCase()
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`).then(yes => {
        this.deleteAttache(file)
      })
    },
    handlerSuccess(response, file, fileList) {
      const data = response.data
      const newFile = { id: data.id, name: data.fileName, url: data.downLoadUrl }
      this.fileList.push(newFile)
      if (this.onSuccess) {
        this.onSuccess(newFile, newFile, this.fileList)
      }
    },
    handlerError(err, file, fileList) {
      this.$message({
        message: '上传文件失败,请联系系统管理协助您解决故障\r\n' + err.message,
        type: 'error',
        duration: 5 * 1000
      })
    },
    // 下载附件
    downloadUrl({ id, name }) {
      return `${process.env.VUE_APP_UPLOAD_SERVER}/file/downLoad/${id}`
    },
    // 删除附件
    deleteAttache(file) {
      const url = `${process.env.VUE_APP_UPLOAD_SERVER}/file/del/${file.id}`
      axios.get(url).then(data => {
        let n = this.fileList.length - 1
        while (n >= 0) {
          if (this.fileList[n].id == file.id) {
            this.fileList.splice(n,1)
          }
          n--
        }
        if (this.onRemove) {
          this.onRemove(file,this.fileList)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
